import {
  Form,
  Input,
  Checkbox,
  Link,
  Button,
  Space,
} from '@arco-design/web-react';
import { FormInstance } from '@arco-design/web-react/es/Form';
import { IconLock, IconUser, IconPhone } from '@arco-design/web-react/icon';
import { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
// import axios from 'axios';
// import useStorage from '@/utils/useStorage';
// import locale from './locale';
import styles from './style/index.module.less';
import { auth } from '@/tcb/app';

export default function LoginForm() {
  const [phone, setPhone] = useState('');
  const [pw, setPw] = useState('');
  const [but, setBut] = useState('发送验证码');
  const [errorMessage, setErrorMessage] = useState('');
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    if (auth.hasLoginState()) {
      console.log(auth.hasLoginState())
      navigate('../', { replace: true });
    }
  }, []);

  // function afterLoginSuccess(params) {
  //   // 记住密码
  //   // 记录登录状态
  //   localStorage.setItem('userStatus', 'login');
  //   // 跳转首页
  //   window.location.href = '/';
  // }

  // function login(params) {
  //   setErrorMessage('');
  //   setLoading(true);
  //   // axios
  //   //   .post('/api/user/login', params)
  //   //   .then((res) => {
  //   //     const { status, msg } = res.data;
  //   //     if (status === 'ok') {
  //   //       afterLoginSuccess(params);
  //   //     } else {
  //   //       setErrorMessage(msg || t['login.form.login.errMsg']);
  //   //     }
  //   //   })
  //   //   .finally(() => {
  //   //     setLoading(false);
  //   //   });
  // }

  function onSubmitClick() {
    if (but === '发送验证码') {
      if (!/\d{11}/.test(phone)) {
        setErrorMessage('请输入合法手机号');
        return;
      }
      setErrorMessage('');
      setLoading(true);
      auth
        .sendPhoneCode(phone)
        .then(() => {
          setBut('登录');
        }, () => {
          setErrorMessage('无法发送验证码，请检查手机号是否合法或网络状况');
        })
        .finally(() => {
          setLoading(false);
        });
      // setTimeout(() => {
      //   setLoading(false);
      //   if (true) {
      //     setBut('登录');
      //   } else {

      //   }
      // }, 1000);
      return;
    }
    setLoading(true);
    auth
      .signInWithPhoneCodeOrPassword({
        phoneNumber: phone,
        phoneCode: pw
      })
      .then((loginState) => {
        // 登录成功
        navigate('../home', { replace: true });
        console.log(loginState);
      }, () => {
        setErrorMessage('登录失败，请确认验证码正确性或网络状况');
        setLoading(false);
      });
    // setTimeout(() => {
    //   setLoading(false);
    //   if (true) {
    //     navigate('../home', { replace: true });
    //   } else {

    //   }
    // }, 1000);

  }

  // 读取 localStorage，设置初始值
  // useEffect(() => {
  //   const rememberPassword = !!loginParams;
  //   setRememberPassword(rememberPassword);
  //   if (formRef.current && rememberPassword) {
  //     const parseParams = JSON.parse(loginParams);
  //     formRef.current.setFieldsValue(parseParams);
  //   }
  // }, [loginParams]);

  return (
    <div className={styles['login-form-wrapper']}>
      <div className={styles['login-form-title']}>登录 Acro Eyes</div>
      <div className={styles['login-form-error-msg']}>{errorMessage}</div>
      <Form
        className={styles['login-form']}
        layout="vertical"
      // ref={formRef}
      >
        <Form.Item>
          <Input
            prefix={<IconPhone />}
            placeholder='手机号'
            defaultValue=''
            onChange={setPhone}
          />
        </Form.Item>
        {but === '登录' && <Form.Item>
          <Input.Password
            prefix={<IconLock />}
            placeholder='验证码'
            defaultValue=''
            onChange={setPw}
          />
        </Form.Item>}
        <Space size={16} direction="vertical">
          <Button type="primary" long onClick={onSubmitClick} loading={loading}>
            {but}
          </Button>
        </Space>
      </Form>
    </div>
  );
}
